<div id="arena" ng-style="{backgroundImage : arenaBackground}">
	<div class="arena-grid">
		<div class="arena-row" ng-repeat="row in arenaGrid">
			<div class="arena-cell" ng-repeat="cell in row" ng-click="cellClicked($index, $parent.$index)"
				ng-class="{reachable : cell.reachable, selected : cell.selected, chargeable : cell.chargeable, attackable : cell.attackable,
					'attackable-left' : ( cell.attackable.direction == 'left' ), 'attackable-right' : ( cell.attackable.direction == 'right' ),
					'attackable-up' : ( cell.attackable.direction == 'up' ), 'attackable-down' : ( cell.attackable.direction == 'down' ) }">
				<div class="shadow-holder">
					<div class="shadow"></div>
				</div>
				<rendered-arena-cell content="cell.character || cell.obstacle"></rendered-arena-cell>
			</div>
		</div>
	</div>
</div>

<button ng-click="goToTown()">Go to town</button>